<template>
  <div class="title-bar">
    <div class="box">
      <div @click="$emit('exit')" class="btn exit">
        <span class="cross"></span>
      </div>
      <div class="btn normal"></div>
      <div @click="$emit('resize')" class="btn resize">
        <span class="triangle"></span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "title-bar",
};
</script>

<style scoped>
.cross {
  position: absolute;
  display: none;
}
.cross::before {
  content: "";
  display: inherit;
  width: 2px;
  left: 4px;
  top: 2px;
  transform: rotate(45deg);
  position: absolute;
  height: 7px;
  background-color: #95201c;
}
.cross::after {
  content: "";
  display: inherit;
  width: 2px;
  left: 4px;
  top: 2px;
  transform: rotate(-45deg);
  position: absolute;
  height: 7px;
  background-color: #95201c;
}
.triangle {
  display: none;
  border: 3px solid #2c6515;
  border-left-color: transparent;
  border-right-color: transparent;
  transform: rotate(45deg);
  position: absolute;
  margin-top: 2px;
  margin-left: 2px;
}
.title-bar {
  height: 22px;
  line-height: 22px;
  width: 100%;
  background-color: #d4d6d8;
  display: block;
}
.box {
  margin-left: 14px;
  display: inline-block;
  height: auto;
}
.box:hover .cross {
    display: block;
}
.box:hover .triangle {
    display: block;
}
.btn {
  border-radius: 50%;
  height: 10px;
  margin-right: 8px;
  display: inline-block;
  width: 10px;
}
.exit {
  background-color: #ee5d56;
  border: 1px solid #de3f35;
}
.exit:active {
  background-color: #aa453f;
  border: 1px solid #c0362c;
}
.normal {
  background-color: #d4d6d8;
  border: 1px solid #b8b8b8;
}
.resize {
  background-color: #5eca42;
  border: 1px solid #52ac2f;
}
.resize:active {
  background-color: #57a840;
  border: 1px solid #356b20;
}
</style>